Google Charts API ব্যবহার করে আপনি আপনার চার্টে Custom Events যোগ করতে পারেন, যা চার্টের সাথে ইউজারের ইন্টারঅ্যাকশনকে আরও আকর্ষণীয় এবং কার্যকরী করে তোলে। আপনি যেমন, চার্টের উপরে ক্লিক, হোভার ইভেন্ট, সিলেকশন ইভেন্ট ইত্যাদি ব্যবহার করতে পারেন।
এখানে আমরা দেখব কিভাবে Custom Events যোগ করতে হয় এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে হয়।
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই একটি প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):
ng new interactive-charts
cd interactive-charts
এখন angular-google-charts লাইব্রেরি ইন্সটল করুন:
npm install angular-google-charts
এটি ইনস্টল হওয়ার পর angular-google-charts প্যাকেজটি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।
এখন, GoogleChartsModule ব্যবহার করার জন্য app.module.ts ফাইলে এটি ইমপোর্ট করুন:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন আমরা একটি Pie Chart তৈরি করব এবং তাতে Custom Event যোগ করব, যেমন ইউজার যখন চার্টের অংশে ক্লিক করবে, তখন একটি নির্দিষ্ট মেসেজ প্রদর্শিত হবে।
app.component.ts:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Interactive Google Charts';
chartType = 'PieChart'; // Chart Type
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Chart Data
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400
};
// Custom event function
onChartClick(event: any) {
alert(`You clicked on: ${event.chart.getSelection()[0]?.row}`);
}
// Function to handle events when chart is ready
onChartReady() {
console.log('Chart is ready to use');
}
}
এখানে, আমরা একটি Pie Chart তৈরি করেছি এবং onChartClick নামে একটি Custom Event ফাংশন তৈরি করেছি যা ইউজার যখন চার্টের কোন অংশে ক্লিক করবে, তখন একটি এলার্ট দেখাবে এবং ক্লিক করা সেগমেন্টের তথ্য প্রদর্শন করবে।
এখন, app.component.html ফাইলে আমরা google-chart কম্পোনেন্ট ব্যবহার করে চার্ট রেন্ডার করব এবং Custom Event-এর জন্য ইভেন্ট হ্যান্ডলার যোগ করব।
app.component.html:<h1>{{ title }}</h1>
<!-- Google Chart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions"
(chartReady)="onChartReady()"
(chartSelect)="onChartClick($event)">
</google-chart>
এখানে:
এখন Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি Pie Chart দেখতে পাবেন এবং চার্টের কোন অংশে ক্লিক করলে এলার্ট দেখাবে, যা সেগমেন্টের উপর নির্ভর করবে।
Google Charts API তে Custom Events এর মাধ্যমে আপনি আরও বিভিন্ন ধরনের ইন্টারঅ্যাকশন যোগ করতে পারেন, যেমন:
চার্টের উপর ক্লিক করার সময় সিলেক্টেড এলিমেন্টের তথ্য দেখতে চান, তখন chartSelect ইভেন্ট ব্যবহার করা হয়।
onChartClick(event: any) {
const selection = event.chart.getSelection();
if (selection.length > 0) {
const item = selection[0];
alert(`You selected: ${this.chartData[item.row][0]}`);
}
}
চার্টের উপরে মাউস হোভার করলে কোন ইনফরমেশন বা টুলটিপ প্রদর্শন করতে পারেন।
onMouseOver(event: any) {
const row = event.chart.getSelection()[0]?.row;
alert(`You hovered over: ${this.chartData[row][0]}`);
}
Custom Events এবং Interactive Charts এর মাধ্যমে আপনি Google Charts-এ ইন্টারঅ্যাকশন এবং ইউজার ইভেন্ট পরিচালনা করতে পারেন। আপনি যেমন, chartSelect (ক্লিক ইভেন্ট), chartReady (চার্ট রেডি হওয়ার ইভেন্ট) ইত্যাদি ব্যবহার করে বিভিন্ন ধরনের ইন্টারঅ্যাকশন যুক্ত করতে পারেন। এই ইভেন্টগুলি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে, যেখানে আপনি ইউজারের ইন্টারঅ্যাকশন অনুসারে চার্টে ডেটা বা ইনফরমেশন প্রদর্শন করতে পারবেন।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
